<template>
  <div class="banner">
      <swiper :options="swiperBanner">
      <!-- slides -->
        <swiper-slide v-for="item of swiperList">
          <img :src="item.imgUrl" alt="">
        </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination swiper-pagination-bullets"  slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
export default{
  name: 'HomeBanner',
  data()  {
    return  {
    "swiperList": [{
        "id": "0001",
        "imgUrl": "http://m.shhuamei.cn/imgV3/banner1.jpg"
      },{
        "id": "0002",
        "imgUrl": "http://m.shhuamei.cn/imgV3/banner2.jpg"
      },{
        "id": "0003",
        "imgUrl": "http://m.shhuamei.cn/imgV3/banner8.jpg"
      }],
      swiperBanner: {
          loop: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          observeParents: true,
          observer: true,
          autoplayStopOnLast : false,
          autoplay: {
            disableOnInteraction: false,
          },
            watchOverflow: true,
            pagination: {
              el: '.swiper-pagination',
            }
      }
    }
  }
}
</script>

<style>
  .banner{
    position: relative;
    z-index: 2;
    padding: 5% 0 6%;
    overflow: hidden;
    }
    .banner .swiper-container{
      overflow: visible;
    }
      .banner .swiper-slide{
        overflow: hidden;
        width: 89%;
        border-radius: .25rem;
        -webkit-transition: all .3s;
        transition: all .3s;
        -webkit-transform: scale(.95);
        transform: scale(.95);
      }
      .banner img{width:100%;}
      .banner .swiper-slide-active{
        border-radius: .25rem;
        box-shadow:0 0 .15rem .02rem rgba(153,0,51,.8);
        -webkit-transform:scale(1);transform:scale(1);
        background: rgba(153,0,51,.4);overflow: hidden
        }
      .banner .swiper-pagination-bullets{bottom:-0.25rem;}
      .banner .swiper-pagination-bullet{
        margin:0 .05rem;
        width:.1rem;
        height:.1rem;
        background:#d2d2d2;
        opacity:1;
        -webkit-transition:all .3s;
        transition:all .3s;}
  .banner .swiper-pagination-bullet-active{
        background:#903;
        -webkit-transform:scale(1.4);
        transform:scale(1.4); }

</style>
